<template>
	<wsPage title="会员信息">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="手机号">
							<Input v-model="queryForm.loginName" placeholder="请输入"></Input>
					</FormItem>
				</Form>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

		<!--开卡弹框-->
		<wsModal v-model="startCardModal.show" ok-text="开卡" title="会员开卡" @on-ok="startCardModalOk" @on-cancel="startCardModalCancel">
		    <Form ref="startCardForm" :model="startCardModal.form" :rules="startCardModal.validate" :label-width="100">
				<FormItem label="卡号" prop="cardNumber">
		            <Input v-model="startCardModal.form.cardNumber"></Input>
		        </FormItem>
				<FormItem label="卡类型" prop="vipCardTypeId">
		            <Select clearable v-model="startCardModal.form.vipCardTypeId" placeholder="请选择" class="ws-form-select" >
		                <Option v-for="item in cardTypes" :value="item.value">{{item.label}}</Option>
		            </Select>
		        </FormItem>
		    </Form>
		</wsModal>

		<!--绑卡弹框-->
		<Modal v-model="bondCardModal.show" :mask-closable="false" :class-name="wTheme" :width="width" @on-cancel="bondCardModalCancel">
			<p slot="header" style="text-align:center;">
				<Icon type="information-circled"></Icon>
				<span>会员绑卡</span>
			</p>
			<div>
				<Form :model="queryCardForm" :label-width="100" inline>
					<FormItem label="卡类型">
			            <Select clearable v-model="queryCardForm.vipCardTypeId" placeholder="请选择" class="ws-form-select" >
			                <Option v-for="item in cardTypes" :value="item.value">{{item.label}}</Option>
			            </Select>
			        </FormItem>
			        <Button type="primary" @click="queryNoBindingCard">查询</Button>
				</Form>
			</div>
			<div v-show="selectCard">
				<Table border 
					:columns="cardTable.cardColumns" 
					:data="cardTable.cardData">
				</Table>
				<Page :total="cardTable.cardPage.total" :page-size="cardTable.cardPage.pageSize" show-elevator show-sizer @on-change="queryNoBindingCard"></Page>
			</div>
			<div slot="footer" class="modal-bottom">
				<Button @click="bondCardModalCancel">取消</Button>
			</div>
		</Modal>

		<!--转卡弹框-->
		<wsModal v-model="forwardCardModal.show" ok-text="转卡" title="转卡" @on-ok="forwardCard" @on-cancel="forwardCardModalCancel">
			<div style="margin-bottom: 15px;">
				<Row>
					<Col span="18" >
						<Row>
							<Col span="4" offset="2" style="line-height: 32px;">
								<span>手机号</span>	
							</Col>
							<Col span="18">
								<Input v-model="queryMemberForm.loginName" placeholder="请输入" @keyup.enter.native="queryByLoginName"></Input>		
							</Col>
						</Row>
					</Col>
					<Col span="4" offset="2">
						<Button type="primary" @click="queryByLoginName">查询</Button>		
					</Col>
				</Row>
			</div>
			<div>
				<Table v-show="selectMember" :columns="memberTable.memberColumns" :data="memberTable.memberData"></Table>
			</div>
		</wsModal>

		<wsModal v-model="detailModal.show" title="详情" @on-ok="detailModalCancel" @on-cancel="detailModalCancel" :width="800">
		    <Row>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						手机号：
					</Col>
					<Col>
						{{detailForm.loginName}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						状态：
					</Col>
					<Col>
						{{detailForm.status === 1?'正常':'锁定'}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						创建时间：
					</Col>
					<Col>
						{{detailForm.createDate}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						昵称：
					</Col>
					<Col>
						{{detailForm.nickname}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						电话：
					</Col>
					<Col>
						{{detailForm.phone}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						邮箱：
					</Col>
					<Col>
						{{detailForm.email}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						性别：
					</Col>
					<Col>
						{{detailForm.sex === null?'':detailForm.sex === '1'?'男':'女'}}
					</Col>
		    	</Col>
		    	<Col span="12" class="layout-content-main">
		    		<Col span="8">
						所在地：
					</Col>
					<Col>
						{{detailForm.address}}
					</Col>
		    	</Col>
		    </Row>
		</wsModal>
	</wsPage>
</template>

<script>
import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				queryForm: {
					loginName: ''
				},
				selectMember: false,
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
					{
						title: '会员昵称',
						key: 'nickname',
						align: 'center'
					},
					{
						title: '手机号',
						key: 'loginName',
						align: 'center'
					},
					// {
					// 	title: '会员类型',
					// 	key: 'typeName',
					// 	align: 'center',
					// 	render: (h, params) => {
					// 		return h('span',{

					// 		},params.row.typeName === null ? '非VIP用户':params.row.typeName)
					// 	}
					// },
					{
						title: '注册时间',
						key: 'createDate',
						align: 'center'
					},
					{
						title: '操作',
						width: 200,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							let childs_ = [];
							// if(params.row.cardType === null&&params.row.status === 1) {
							// 	let c2 = h('Button', {
							// 		props: {
	                        //             type: 'text',
	                        //             size: 'small'
	                        //         },
							// 		on: {
							// 			click: () => {
							// 					this.startCardModal.form.memberId = params.row.id;
							// 					this.queryCardTypes(1);
							// 			}
							// 		}
							// 	},'开卡');
							// 	childs_.push(c2);
							// }
							// if(params.row.cardType === null&&params.row.status === 1) {
							// 	let c3 = h('Button', {
							// 		props: {
	                        //             type: 'text',
	                        //             size: 'small'
	                        //         },
							// 		on: {
							// 			click: () => {
							// 				this.bondCardModal.form.memberId = params.row.id;
							// 				this.queryCardTypes(2);
							// 			}
							// 		}
							// 	}, '绑卡');
							// 	childs_.push(c3);
							// }
							if(params.row.cardType != null&&params.row.status === 1) {
								let c4 = h('Button', {
									props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											this.id = params.row.id;
											this.forwardCardModal.show = true;
											// this.queryNoBindingMember();
										}
									}
								},  '转卡');
								childs_.push(c4);
							}
							let c1 = h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.detailModal.show = true;
										this.queryMember(params.row.id);
									}
								}
							}, '详情');
							childs_.push(c1);
							return h('div', childs_)
						}
					}],
					vipCards: [],
					cardTypes: [],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				detailForm:{},
				detailModal: {
					show: false
				},
				//无绑定卡会员列表
				memberTable: {
					memberColumns: [{
						title: '会员登录名',
                        key: 'loginName',
                        fixed: 'left'
					},{
						title: '昵称',
                        key: 'nickname'
					},{
						title: '会员手机号',
                        key: 'phone',
                        fixed: 'right'
					}],
					memberData: []
				},
				//无绑定会员卡列表
				selectCard: false,
				queryCardForm: {
					vipCardTypeId: ''
				},
				cardTable: {
					cardColumns: [{
						title: '会员卡编号',
                        key: 'cardNumber',
                        width: 200,
                        fixed: 'left'
					},{
						title: '会员卡类型',
                        key: 'vipCardTypeName',
                        align: 'left',
                        width: 200
					}, {
						title: '操作',
						width: 80,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							return h('div', [h('Button', {
								props: {
                                    type: 'primary',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.bondCardModal.form.id = params.row.id;
										this.toBond();
									}
								}
							},'选    择')])
						}
					}],
					cardData: [],
					cardPage: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				cardData: [],
				forwardMemberId: '',
				id: '',
				//开卡弹框
				startCardModal: {
					show: false,
					form: {
						memberId: '',
						cardNumber: '',
						vipCardTypeId: ''
					},
					validate: {
						cardNumber: [
	                        { required: true, message: '请填写卡号', trigger: 'blur' },
	                        { validator: Common.validateSpecialCharacters, trigger: 'blur'},
	                        {validator: Common.validateTrim, trigger: 'blur'},
	                        { min: 12, message: '卡号长度必须为12位'},
	                        { max: 12, message: '卡号长度必须为12位'}
	                    ],
						vipCardTypeId: [
	                        { required: true, message: '请选择卡类型', trigger: 'blur' }
	                    ],
						annualCost: [
	                        { required: true, message: '请填写卡的年费用', trigger: 'blur' },
	                        {validator: Common.validatePrice, trigger: 'blur' },
	                        {validator: Common.validateTrim, trigger: 'blur'}
	                    ],
					}
				},
				//绑卡弹框
				bondCardModal: {
					show: false,
					form: {
						memberId: '',
						id: ''
					},
					validate: {
						id: [
		                { required: true, message: '请选择卡', trigger: 'blur' }
		            ],
					}
				},
				type: '',
				queryMemberForm: {
					loginName: ''
				},
				//转卡弹框
				forwardCardModal: {
					show: false
				},
				clickSave: false
			}
		},
		computed: {

		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.clickSave = false;
				this.query();
			},
			//刷新
			refresh(){
				this.queryForm.loginName = '';
				this.table.page.pageNum = 1;
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/common/members/search?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 开卡的弹框取消操作
			 */
			startCardModalCancel() {
				this.$refs['startCardForm'].resetFields();
				this.startCardModal.show = false;
				this.clickSave = false;
			},
			/**
			 * 开卡的弹框确认操作
			 */
			startCardModalOk() {
				const _this = this;
				this.$refs['startCardForm'].validate((valid) => {
					if (valid) {
						_this.startCard();
			        } else {
			            this.$Message.error('请填写相关信息!');
			        }
		        });
			},
			startCard(){
				if(this.clickSave){
					this.$Message.warning('请不要重复点击');
					return;
				}
				this.clickSave = true;
				const _this = this;
				this.axios.put('/ws/common/startcard', _this.startCardModal.form).then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('开卡成功');
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('开卡失败:' + message_);
					}
					_this.$refs['startCardForm'].resetFields();
					_this.startCardModal.show = false;
					_this.init();
				});
			},

			/**
			 * 绑卡的弹框取消操作
			 */
			bondCardModalCancel() {
				this.bondCardModal.show = false;
				this.selectCard = false;
				this.queryCardForm.vipCardTypeId = '';
				this.clickSave = false;
			},
			/**
			 * 绑卡的弹框确认操作
			 */
			toBond() {
				const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认绑定此会员吗?',
        			onOk: function() {
        				_this.bondCard();
        			}
        		});	
			},
			/**
			 * 绑卡
			 */
			bondCard(){
				if(this.clickSave){
					this.$Message.warning('请不要重复点击');
					return;
				}
				this.clickSave = true;
				const _this = this;
				this.axios.put('/ws/common/bondcard', _this.bondCardModal.form).then(response => {
						let res = response.data;
						if(0 === res.meta.code) {
							_this.$Message.success('绑卡成功');
						} else {
							let message_ = res.meta.message;
							_this.$Message.warning('绑卡失败:' + message_);
						}
						_this.bondCardModal.show = false;
						_this.selectCard = false;
						_this.queryCardForm.vipCardTypeId = '';
						_this.init();
				});
			},
			/**
			 * 转卡的弹框取消操作
			 */
			forwardCardModalCancel() {
				this.forwardCardModal.show = false;
				this.memberTable.memberData = [];
				this.selectMember = false;
				this.queryMemberForm.loginName = '';
				this.type = '';
				this.clickSave = false;
			},
			/**
			 * 转卡的弹框确认操作
			 */
			forwardCard(){
				if(this.clickSave){
					this.$Message.warning('请不要重复点击');
					return;
				}
				if(this.forwardMemberId == ''){
					this.$Message.warning('请先查询会员！');
					return;
				}
				this.clickSave = true;
				const _this = this;
				this.axios.put('/ws/common/forwardcard/'+_this.id+'/'+_this.forwardMemberId).then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('转卡成功');
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('转卡失败:' + message_);
					}
					_this.forwardCardModal.show = false;
					_this.memberTable.memberData = [];
					_this.selectMember = false;
					_this.queryMemberForm.loginName = '';
					_this.init();
					_this.type = '';
				});
			},

			/**
			*	查询会员属性为空的vip卡
			*/
			queryNoBindingCard(pageNum){
				if(isNaN(pageNum)){
					this.cardTable.cardPage.pageNum = 1;
				}else{
					this.cardTable.cardPage.pageNum = pageNum;
				}
				let pageSize = this.cardTable.cardPage.pageSize;
				const _this = this;
				this.axios.post('/ws/ops/vipCards/unmanned?pageSize=' + pageSize + '&pageNum=' + this.cardTable.cardPage.pageNum,this.queryCardForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildCardPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
					if(res.data.list.length == 0){
						_this.selectCard = false;
						_this.$Message.warning("此类型下无可用卡");
					}else{
						_this.selectCard = true;
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildCardPageData(data_) {
				this.cardTable.cardData = data_.list;
				this.cardTable.cardPage.total = data_.total;
			},
			/**
			*	查询vip卡类型
			*/
			queryCardTypes(type){
				const _this = this;
				this.axios.get('/ws/ops/vipCardType/findvalue').then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.cardTypes = res.data;
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('查询卡类型失败:' + message_);
					}
					if(type === 1){
						_this.startCardModal.show = true;
					}
					if(type === 2){
						_this.bondCardModal.show = true;
					}
				});
			},
			/**
			*	查询无绑定卡会员
			*/
			// queryNoBindingMember(){
			// 	let pageSize = this.memberTable.memberPage.pageSize;
			// 	let pageNum = this.memberTable.memberPage.pageNum;
			// 	const _this = this;
			// 	this.axios.post('/ws/common/members/nobinding?pageSize=' + pageSize + '&pageNum=' + pageNum).then(response => {
			// 		var res = response.data;
			// 		var resMeta = res.meta;
			// 		if (0 == resMeta.code) {
			// 			_this.buildMemberPageData(res.data);
			// 		} else {
			// 			_this.$Message.warning(resMeta.message);
			// 		}
			// 	});
			// },
			/**
			 * 构建表格数据
			 */
			// buildMemberPageData(data_) {
			// 	this.memberTable.memberData = data_.list;
			// 	this.memberTable.memberPage.total = data_.total;
			// },
			detailModalCancel(){
				this.detailModal.show = false;
			},
			//详情
			queryMember(id){
				const _this = this;
				this.axios.get('/ws/common/members/' + id).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.detailForm = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			queryByLoginName(){
				const _this = this;
				if(this.queryMemberForm.loginName == ''){
					this.$Message.warning("请输入手机号");
					return;
				}
				this.axios.post('/ws/common/members/byloginname',this.queryMemberForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						if(res.data.length <= 0){
							_this.$Message.warning("无此会员");
							return;
						}
						_this.memberTable.memberData = res.data;
						_this.forwardMemberId = res.data[0].id;
						_this.type = '1';
					} else {
						_this.$Message.warning(resMeta.message);
					}
					_this.selectMember = true;
				});
			},


		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.layout-content-main{
        padding: 20px;
        float:left;
        justify-content: space-around;
        font-size:14px;
    }
</style>
